import React, { useState, useEffect } from 'react';
import { request } from 'umi';
import {
  ProFormSelect,
  ProFormText,
  ProFormCascader,
} from '@ant-design/pro-components';

import { Col, Row, Collapse } from 'antd';

const { Panel } = Collapse;

const SettlementInformation: React.FC = () => {
  const [otherExpant, setOtherExpant] = useState([]);
  // useEffect(() => {
  //   request('/api/otherExpant').then((res) => {
  //     console.log(res.data);

  //     setOtherExpant(res.data);
  //   });
  // }, [otherExpant]);
  return (
    <>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormSelect.SearchSelect
            options={[
              {
                value: 'time',
                label: '履行完终止',
                type: 'time',
                options: [
                  {
                    value: 'time1',
                    label: '履行完终止1',
                  },
                  {
                    value: 'time2',
                    label: '履行完终止2',
                  },
                ],
              },
            ]}
            name="unusedMode"
            label="是否资金归集"
          />
        </Col>
        <Col flex={3}>
          <ProFormSelect.SearchSelect
            options={[
              {
                value: 'time',
                label: '履行完终止',
                type: 'time',
                options: [
                  {
                    value: 'time1',
                    label: '履行完终止1',
                  },
                  {
                    value: 'time2',
                    label: '履行完终止2',
                  },
                ],
              },
            ]}
            name="unusedMode"
            label="结算周期"
          />
        </Col>
        <Col flex={3}>
          <ProFormSelect.SearchSelect
            options={[
              {
                value: 'time1',
                label: '履行完终止1',
              },
              {
                value: 'time2',
                label: '履行完终止2',
              },
            ]}
            name="unusedMode"
            label="结算币种"
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormSelect.SearchSelect
            options={[
              {
                value: 'time1',
                label: '银行账户',
              },
              {
                value: 'time2',
                label: '履行完终止2',
              },
            ]}
            name="unusedMode1"
            label="目的账户类型"
          />
        </Col>
        <Col flex={3}>
          <ProFormSelect.SearchSelect
            options={[
              {
                value: 'time1',
                label: '银行账户',
              },
              {
                value: 'time2',
                label: '履行完终止2',
              },
            ]}
            name="unusedMode1"
            label="结算方式"
          />
        </Col>
        <Col flex={3}>
          <ProFormSelect.SearchSelect
            options={[
              {
                value: 'time1',
                label: '是',
              },
              {
                value: 'time2',
                label: '否',
              },
            ]}
            name="unusedMode1"
            label="是否支持手工结算"
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormCascader
            name="city"
            request={async () => [
              {
                value: 'zhejiang',
                label: '浙江',
                children: [
                  {
                    value: 'hangzhou',
                    label: '杭州',
                    children: [
                      {
                        value: 'xihu',
                        label: '西湖',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ]}
            label="所属国家/地区"
            initialValue={['zhejiang', 'hangzhou', 'xihu']}
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="开户人地址"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="Swift Code"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="开户银行"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="开户银行行号"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
        <Col flex={3}>
          <ProFormText
            name="namess"
            label="账户名称"
            rules={[
              {
                required: true,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col flex={3}>
          <ProFormText name="sda" label="户口号码" />
        </Col>
        <Col flex={3}>
          <ProFormText name="sdas" label="确认户口号码" />
        </Col>
        <Col flex={3}>
          <ProFormText name="sdax" label="其他编码" />
        </Col>
      </Row>

      <Collapse ghost>
        {/* <Panel header="其他编码说明" key="1" showArrow={false}>
          {otherExpant.map((item) => {
            return <p>{item}</p>;
          })}
        </Panel> */}
      </Collapse>
    </>
  );
};
export default SettlementInformation;
